<html>
    <head>
        <title>H5 正常但 App 异常</title>
    </head>
    <body>
        <script>
            /*
                        一、H5正常单App异常的可能性

                              1、css 异常

                                      ①、不支持的选择器

                                              非 H5端不支持  "*"  选择器(通配符选择器)

                                              body的元素选择器请改为page，同样，div 和 ul 和 li 等改为 view、span ，

                                              text、a 改为 navigator、img 改为 image...

                                      ②、组件和页面样式相互影响

                                              非H5端默认并未启用 scoped，如需要隔离组件样式可以在 style 标签增加 scoped 属性，H5端为了隔离页面间的样式默认启用了 scoped

                                      ③、webview 浏览器兼容性

                                              vue页面在 App端，默认是被系统的webview 渲染的(不是手机自带浏览器，是rom的webview),在较老的手机上，比如Android4.4、5.0或iOS8，很多css是不支持的

                                              所以不要使用太新的css，会导致界面异常。

                                              注意，这不意味着不能使用 flex, Android4.4也支持flex，只是不要使用太新的css

                                              可以找Android4.4手机或使用pc模拟器实际测试下，大多数国产Android模拟器都是4.4或5.0。

                                              从 uni-app 2.5.3 起，Android端支持引入腾讯x5浏览器内核，可以抹平低端Android的浏览器兼容性问题，详见x5使用指南

                                              小程序不存在浏览器兼容问题，它字典了一个很大的Webview。所以，如果你的H5和小程序界面正常，而Android低端机App界面异常，

                                              且App没有使用x5引擎，那基本就可以判定是因为css兼容性问题导致。

                                              app端 nvue页面，不存在浏览器兼容问题，，它自带一个统一的原生渲染引擎，不依赖webview.

                                              Android4.4对应的webview是chrome37。 各端浏览器内核的详情情况参阅：

                                                         https://ask.dcloud.net.cn/article/1318

                                      ④、原生组件层级问题
                                      
                                            H5没有原生组件问题的概念，非H5端游原生组件并引发了原声组件层级高于前端组件的概念，
                                            
                                            要遮挡 video 、map 等原生组件，请使用 cover-view

                              2、使用了非H5端不支持的API

                                            小程序和App的js运行在 jscore 下，而不是运行在浏览器下，没有浏览器中专用的js对象：  
                                            
                                                    eg:  document、xmlhttp、Cookie、window、location、navigator、localstorage、websql、inexdb、webgl等对象。

                                            如果你的代码没有直接使用这些，那很可能是引入的第三方库使用了这些。

                                            如果是后者，去插件市场("https://ext.dcloud.net.cn/")搜索替代方案.

                                            要知道非H5端的js是运行在一个独立的js Core  或 v8下。(手机app、小程序运行在特定js引擎下，而非浏览器环境)

                                            从HBuilderX 2.6起，App端新增了renderjs,这是一种运行在视图层的js，vue页面通过renderjs可以操作浏览器对象，

                                            进而可以让基于浏览器的库直接在 uni-app 的App端运行，注入 echarts、threejs，详见：https://uniapp.dcloud.net.cn/tutorial/renderjs.html

                             3、使用了非H5端不支持的vue语法，受小程序自定义组件限制的写法，详见：  https://zh.uniapp.dcloud.io/tutorial/vue-components

                             4、不要再引用组件的地方在组件标签上写 style="xxx" （不要给组件添加行内样式），要在组件内部写样式

                             5、url(//action.net)  等路径，改为 url(https://action.net), 因为在App端 "//" 是file协议

                             6、很多人在H5端联网时使用本地测试服务地址(localhost 或 123.0.0.1),这样的联网地址手机App端是无法访问的，请使用手机可访问的IP进行联网。
                    */
        </script>
    </body>
</html>